$(function () {
  const cate_id = window.parent.cateid
  const layer = layui.layer
  const laydate = layui.laydate
  const form = layui.form
  laydate.render({
    elem: '#test',
    type: 'datetime'
  })
  tinymce.init({
    selector: '#content',
    language: 'zh_CN',
    statusbar: false
  })
  // tab切换
  $('.layui-tab-title').on('click', 'li', function () {
    const index = $(this).index()
    // console.log(index)
    $('.layui-tab-item').eq(index).addClass('layui-show').siblings('.layui-tab-item').removeClass('layui-show')
  })
  // 获取所有分类
  getCateAll()
  async function getCateAll() {
    const { data: res } = await axios({
      method: 'GET',
      url: '/ydd_cate/all'
    })
    if (res.errno !== 0) {
      return layer.msg('获取分类失败！')
    }
    const htmlStr = res.data
      .map(item => {
        return `<option value="${item.id}">${item.catename}</option>`
      })
      .join('')
    $('[name=cateid]').html('<option value=""></option>' + htmlStr)
    form.render('select')
    getTagsAll()
  }
  // 获取所有标签
  async function getTagsAll() {
    const { data: res } = await axios({
      method: 'GET',
      url: '/ydd_tag/all'
    })
    if (res.errno !== 0) {
      return layer.msg('获取标签失败！')
    }
    const htmlStr = res.data
      .map(item => {
        return `<input type="checkbox" name="tags" value="${item.tagname}" title="${item.tagname}" lay-skin="primary" data-id="${item.id}" />`
      })
      .join('')
    $('.tags').html(htmlStr)
    form.render('checkbox')
    renderArtForm(cate_id)
  }
  // 判断是否存在 cate_id 如果有就将对应的数据渲染到页面上
  async function renderArtForm(cate_id) {
    if (!cate_id) return
    const { data: res } = await axios({
      method: 'GET',
      url: '/ydd_article/rowInfo',
      params: {
        id: cate_id
      }
    })
    if (res.errno !== 0) {
      return layer.msg('获取文章信息失败！')
    }
    form.val('form-addArt', res.data)
    if (res.data.pic) {
      $('.imgPreview')
        .slideDown()
        .find('img')
        .prop('src', 'http://124.223.14.236:8060/' + res.data.pic)
    }
    if (res.data.tags) {
      $('.layui-form-checkbox').removeClass('layui-form-checked')
      const arr = res.data.tags.split(',')
      arr.forEach(item => {
        $('.layui-form-checkbox')
          .find('span')
          .each(function () {
            if ($(this).html() === item) {
              $(this).parent().addClass('layui-form-checked')
            }
          })
      })
    }
    if (res.data.content) {
      $('#content_ifr').contents().find('#tinymce').html(res.data.content)
    }
  }
  // 阅读次数点击增加或减少
  $('.decrease').on('click', function () {
    let val = $('[name=click]').val()
    if (val <= 1) return
    val--
    $('[name=click]').val(val)
  })
  $('.increase').on('click', function () {
    let val = $('[name=click]').val()
    if (val >= 10) return
    val++
    $('[name=click]').val(val)
  })
  // 监听阅读次数input的change事件
  $('[name=click]').on('change', function () {
    let val = $(this).val()
    if (val < 1) {
      val = 1
    } else if (val > 10) {
      val = 10
    } else {
      val = parseInt(val)
    }
    $(this).val(val)
  })
  // 图片文件上传事件
  $('.btnUpload').on('click', function () {
    $('[type=file]')[0].click()
  })
  $('[type=file]').on('change', async function (e) {
    const files = e.target.files
    const fd = new FormData()
    fd.append('file', files[0])
    const { data: res } = await axios({
      method: 'POST',
      url: '/common/upload?type=images',
      data: fd
    })
    if (res.errno !== 0) {
      return layer.msg('图片上传失败！')
    }
    $('.imgPreview').slideDown()
    $('.img img').prop('src', 'http://124.223.14.236:8060/' + res.data.savePath)
    $('[name=pic]').val(res.data.savePath)
  })
  $('.layui-icon-close').on('click', function () {
    $('.imgPreview').slideUp()
  })
  let status = ''
  $('.btn-pub').on('click', function () {
    status = '2'
  })
  $('.btn-save').on('click', function () {
    status = '1'
  })
  // 添加或修改文章表单的提交事件
  $('#addArticle').on('submit', async function (e) {
    e.preventDefault()
    let url = '/ydd_article/add'
    let id = ''
    if (cate_id) {
      url = '/ydd_article/update'
      id = cate_id
    }
    let tagsArr = []
    $('[name=tags]:checked').each(function () {
      tagsArr.push($(this).val())
    })
    const { data: res } = await axios({
      method: 'POST',
      url: url,
      data: {
        title: $('[name=title]').val(),
        author: $('[name=author]').val(),
        cateid: $('[name=cateid]').val(),
        click: $('[name=click]').val(),
        create_date: new Date($('[name=create_date]').val()).getTime(),
        ishot: $('[name=ishot]:checked').length === 1 ? 1 : 0,
        istop: $('[name=istop]:checked').length === 1 ? 1 : 0,
        lovenum: $('[name=lovenum]').val(),
        pic: $('[name=pic]').val(),
        tags: tagsArr.join(','),
        keywords: $('[name=keywords]').val(),
        description: $('[name=description]').val(),
        content: $('[name=content]').val(),
        status: status,
        id
      }
    })
    if (res.errno !== 0) {
      return layer.msg('添加或修改文章失败！')
    }
    layer.msg('添加或修改文章成功！')
    $(this)[0].reset()
    window.parent.cateid = ''
    window.parent.document.querySelector('.layui-show .x-iframe').src = './article.html'
  })
  // 返回文章列表页
  $('.btn-back').on('click', function () {
    window.parent.cateid = ''
    window.parent.document.querySelector('.layui-show .x-iframe').src = './article.html'
  })
  // 点击显示图片详情
  $('.imgPreview').on('click', 'p', function () {
    layer.open({
      title: '图片详情',
      type: 1,
      area: ['700px', '400px'],
      content: `<div class="layui-card" style="height:100%">
      <div class="layui-card-body" style="display:flex;justify-content:center;alian-items:center;height:100%;box-sizing:border-box">
        <img src="${$('.img img').prop('src')}" alt="" style="max-width:100%;max-height:100%" />
      </div>
      </div>`
    })
  })
})
